<template>
    <theme-box title="">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <form-select title="商户名称" :required=true name="baMchtId" :options="mchtList" v-show ="this.type == true"></form-select>
                <form-input title="商户名称" :read-only="true" :required=true name="baMchtId2" :value="dis?editData.mchtName: ''" v-show="dis"></form-input>
                <form-input title="广告二维码名称" :required="true" name="baName" :value="dis?editData.baName: ''"></form-input>
                <!--<form-group title="广告二维码图片" name="file" :required=type>-->
                    <!--<img class="preView" v-show="dis" :src="imgBase64 || editData.picPath" alt="">-->
                    <!--<file-upload v-ref:fileupload class="fileImg" :val.sync="imgBase64"></file-upload>-->
                <!--</form-group>-->
                <form-select title="定位标识" :required=true name="potFlag" :options="potFlat" :value="dis?editData.potFlag: ''"></form-select>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <v-button v-show="!dis" type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right" id="submit">确认</v-button>
            </div>
            <!-- /.box-footer -->
        </form>
    </theme-box>
</template>

<style lang="less" scoped>
    img.preView{
      max-width: 10%;
    }
</style>

<script>
    import "plugins/jquery-validation";
    import {
        // dateTime,
        createDataTable
    } from "ui/collections/general.js";
    var serialize = require('form-serialize');
    var dataTable;
    export default {
        data() {
            return {
                baId:'',
                baMchtId:'',
                type:true,
                mchtList:[], //商户列表
                mchtusrList: [], //店员列表
                potFlat: [{
                    key: "是",
                    value: "0"
                }, {
                    key: "否",
                    value: "1"
                }],
                imgBase64: ''
            };
        },
        props: {
            mchtNameOptions: Array,
            editData: Object,
            operate: {
                type: String
            }
        },
        computed: {
            dis() {
                return this.operate === 'edit'
            }
        },
        methods: {
            reset() {
                $("label.error").remove();
                this.$els.form.reset();
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId;
                self
                    .$post({
                        url: "/api/v2" + projectName_Url + "/list/mcht/mchtAgent/" + mchtId,
                        method: "GET"
                    })
                    .then(
                        response => {
                            let list = response.content.info;
                            self.$set("mchtList", list);
                            self.mchtIdValue = list[0].value
                        },
                        error => {}
                    );
            }
        },
        destroyed () {
            this.imgBase64 = '';
        },
        ready() {
            const self = this;
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function(data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                }
            });

            let method = '';
            if (this.dis) { // edit
                this.type = false
                method = 'POST';
            } else {
                self.getMcht();
                this.type = true
                method = 'POST';
            }
            $(this.$els.form).validate({
                submitHandler: async function(form) {
                    // let formData = new FormData(form);
                    var _data = serialize(this.currentForm, {
                        hash: true,
                        empty: true
                    });
                    // loading(true);
                    if (self.dis) {
                        //传参的时候删掉为了修改显示用的baMchtId2
                        delete _data.baMchtId2;
                        _data.baId = self.editData.baId;
                        _data.baMchtId = self.editData.baMchtId;
                        var result = await self.$post({
                                url: "/api/v2" + projectName_Url + "/plat/qr/banner/update" ,
                                data:_data,
                                method
                            })
                        Midway.alert({title:"操作提示",content:result.errorInfo})
                        self.$emit('close', true);
                       }else{
                        var result = await self.$post({
                                url: "/api/v2" + projectName_Url + "/plat/qr/banner" ,
                                data: _data,
                                method
                            }).then(response => {
                                let data = {
                                    title: "提示",
                                    content: "操作成功"
                                };
                                self.reset();
                                Midway.alert(data).then(function() {
                                        self.$emit('close', true);
                                    })
                            })
                    }
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "file") {
                        error.insertAfter(".file-item");
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    baName: {
                        required: true,
                        maxlength: 20
                    },
                    potFlag: {
                        required: true
                    }
                }
            });

            // if (self.dis) {
            //     $(self.$els.form.file).rules("remove", "required");
            // } else {
            //     $(self.$els.form.file).rules("add", {
            //         required: true
            //     });
            // };
        }
    };
</script>

